<template>
<!-- 用户管理 -->
  <div>
    <!-- 搜索/新增 -->
    <div>
      <el-input v-model="formSearch.nickname" placeholder="请输入姓名" class="search"></el-input>
      <el-input v-model="formSearch.username" placeholder="请输入学号" class="search"></el-input>
      <el-button type="primary" plain @click="search()">搜索</el-button>
      <el-button @click="reset()">重置</el-button>
      <el-button class="add" type="primary" @click="add()">新增</el-button>
    </div>
    <!-- 列表 -->
    <BaseTable
       :tableData="tableData"
       :loading="loading"
       :clickRow="true"
       :page="page"
       @pageChange="pageChange"
      >
      <el-table-column prop="nickname" label="姓名" width="180"></el-table-column>
      <el-table-column prop="username" label="学号" width="160"></el-table-column>
      <el-table-column prop="gender" label="性别" width="130">
        <template slot-scope="s">
          {{ s.row.gender === 1 ? "男" : "女"}} 
        </template>
      </el-table-column>
      <el-table-column prop="grade" label="班级" width="180"></el-table-column>
      <el-table-column prop="role" label="身份" width="180">
        <template slot-scope="s">
          <span :style="{ 'color':(s.row.role === '1' ? '#F77F6D' : '')}">{{ s.row.role === '1' ? "管理员" : "普通用户"}} </span>
        </template>
      </el-table-column>
      <el-table-column prop="mobile" label="联系电话">
        <template slot-scope="s">
          <span v-if="s.row.mobile">{{ s.row.mobile}}</span>
          <el-tag v-else type="warning">暂未填写</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="email" label="邮箱">
        <template slot-scope="s">
          <span v-if="s.row.email">{{ s.row.email}}</span>
          <el-tag v-else type="warning">暂未填写</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="80">
        <template slot-scope="s">
          <span :style="{ 'color':(s.row.status === 1 ? '#59A960' : '')}">{{ s.row.status === 1 ? "未占座" : "正占座"}} </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160">
        <template slot-scope="s">
          <el-button type="text" @click="edit(s.row._id)">编辑</el-button>
          <el-button type="text" @click="resetPassword(s.row._id)">重置密码</el-button>
          <el-button type="text" class="cell-del-button" @click="remove(s.row._id)">删除</el-button>
        </template>
      </el-table-column>
    </BaseTable>
    <!-- 新增/编辑弹框 -->
    <Add ref="addDialog" @getListData="initData" :curId="curId"></Add>
  </div>
</template>

<script>

export default {
  name: "user",
  data() {
    return {
      curId: '',
      tableData: [],
      loading: false,
      formSearch: {
        nickname: '',
        username: ''
      }, 
      page: {
        page: 1,
        limit: 10,
        total: 0
      },
      form: {
        password: 123456
      }, 
    };
  },
  activated(){
    this.initData();
  },
  mounted() {
    this.initData();
  },
  components: {
    BaseTable: () => import("components/BaseTable"),
    Add: () => import("views/User/Add")
  },
  methods: {
    //新增弹窗
    add() {
      this.curId = ''
      this.$refs.addDialog.open()
    },
    //编辑弹窗
    edit(_id) {
      this.curId = _id
      this.$refs.addDialog.open()
    },
    //列表
    initData() {
     this.loading = true;
     this.$http.get("user/list",{ params :{
        page: this.page.page,
        limit: this.page.limit,
        nickname: this.formSearch.nickname,
        username: this.formSearch.username,
     }})
       .then((res) => {
        console.log(res)
        if (res.status === 200) {
          this.tableData = res.data.data;
          this.page.total = res.data.total;
          console.log(this.tableData,444)
        }
        this.loading = false;
       })
       .catch((err) => {
         this.loading = false;
         this.$message.error("查询数据失败")
       })    
    },
    //搜索
    search(){
      this.page.page = 1 
      this.initData()
    },
    //重置
    reset() {
      this.formSearch.nickname = '';
      this.formSearch.username = '';
      this.page.page = 1;
      this.page.total = 0;
      this.initData();
    },
    //分页
    pageChange(val) {
      this.page = val;
      this.initData();
    },
    // 重置密码
    resetPassword(_id) {
      this.$confirm('此操作将重置该用户密码为123456, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true;
        this.$http.put("user/update/" + _id, this.form)
          .then((res) => {
            console.log(res,123)
            if (res.status === 200) {
             this.tableData = res.data.data;
             this.page.total = res.data.total;
             this.$message.success("重置密码成功!");
             this.reset();
           }
           this.loading = false;
          })
          .catch((err) => {
            this.loading = false;
            this.$message.error("重置密码失败")
            this.reset();
          })     
      })
    },
    //删除用户
    remove(_id) {
      this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true;
        this.$http.delete("user/delete/" + _id)
          .then((res) => {
            console.log(res,456)
            if (res.status === 200) {
             this.tableData = res.data.data;
             this.page.total = res.data.total;
             this.$message.success("删除该用户成功!");
             this.reset();
           }
           this.loading = false;
          })
          .catch((err) => {
            this.loading = false;
            this.$message.error("删除用户失败")
            this.reset();
          })     
      })
    },
  }
};
</script>

<style lang="scss" scoped>
.search{
  width: 15%;
  margin-right: 15px;
}
.add{
  float: right;
  margin-right: 25px;
}
</style>